{% extends "admin/change_list.html" %}
{% load i18n %}

{% block title %}{% trans 'Your cardio workouts' %}{% endblock %}

{% block object-tools %}
<link rel="stylesheet" type="text/css" href="/fiteat/media/css/tabs.css" />
<div id="tabs_container">
    <div id="tab_header">
        <ul>
            <li><a href="#" onclick="return showPane('duration', this)" id="tab_duration">{% trans 'Duration' %}</a></li>
            <li><a href="#" onclick="return showPane('distance', this)" id="tab_distance">{% trans 'Distance' %}</a></li>
            <li><a href="#" onclick="return showPane('avg_hr', this)" id="tab_avg_hr">{% trans 'Average HR' %}</a></li>
            <li><a href="#" onclick="return showPane('max_hr', this)" id="tab_max_hr">{% trans 'Max HR' %}</a></li>
            <li><a href="#" onclick="return showPane('calories', this)" id="tab_calories">{% trans 'Calories' %}</a></li>
            <li><a href="#" onclick="return showPane('custom_chart1', this)" id="tab_custom_1">{% trans 'Cust. Chart #1' %}</a></li>
            <li><a href="#" onclick="return showPane('custom_chart2', this)" id="tab_custom_1">{% trans 'Cust. Chart #2' %}</a></li>
            <li><a href="#" onclick="return showPane('custom_chart3', this)" id="tab_custom_1">{% trans 'Cust. Chart #3' %}</a></li>
        </ul>
    </div>

    <div id="tab_content" align="center">
        <div id="duration"><img src="/fiteat/cardio/graph/duration/all/" align="center"></div>
        <div id="distance"><img src="/fiteat/cardio/graph/distance/all/" align="center"></div>
        <div id="avg_hr"><img src="/fiteat/cardio/graph/avg_hr/all/" align="center"></div>
        <div id="max_hr"><img src="/fiteat/cardio/graph/max_hr/all/" align="center"></div>
        <div id="calories"><img src="/fiteat/cardio/graph/calories/all/" align="center"></div>
        <div id="custom_chart1"><img src="/fiteat/cardio/graph/custom_chart1/all/" align="center"></div>
        <div id="custom_chart2"><img src="/fiteat/cardio/graph/custom_chart2/all/" align="center"></div>
        <div id="custom_chart3"><img src="/fiteat/cardio/graph/custom_chart3/all/" align="center"></div>
    </div>
</div>
<script src="/fiteat/media/js/setup_tabs.js" onload="setupPanes('tabs_container', 'tab_duration');"/>
{% if has_add_permission %}
<ul class="object-tools"><li><a href="add/{% if is_popup %}?_popup=1{% endif %}" class="addlink">{% blocktrans with cl.opts.verbose_name|escape as name %}Add {{ name }}{% endblocktrans %}</a></li></ul>
{% endif %}
{% endblock %}

